<!--vue挂载的组件-->
<script setup>
import {Navigation, Pagination, Scrollbar, A11y, Autoplay} from 'swiper/modules';
import {Swiper, SwiperSlide} from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import {reactive, ref} from "vue";
const navigation = ref({
  nextEl: ".swiper-button-next",
  prevEl: ".swiper-button-prev",
});
// 在modules加入要使用的模块
const modules = [Autoplay, Pagination, Navigation, Scrollbar]
const prevEl = (item, index) => {
  // console.log('上一张' + index + item)
};
const nextEl = () => {
  // console.log('下一张')
};
// 更改当前活动swiper
const onSlideChange = (swiper) => {
// swiper是当前轮播的对象，里面可以获取到当前swiper的所有信息，当前索引是activeIndex
  console.log(swiper.activeIndex)
}
</script>

<template style="height: 100%;width: 100%">

    <swiper
        :modules="modules"
        :loop="true"
        :slides-per-view="1"
        :space-between="10"
        :autoplay="{ delay: 4000, disableOnInteraction: false }"
        :navigation="navigation"
        :pagination="{ clickable: true }"
        :scrollbar="{ draggable: false }"
        class="swiperBox"
        @slideChange="onSlideChange">
      <swiper-slide><img  class="imageStyle" src="@/assets/BZ/1.png"></swiper-slide>
      <swiper-slide ><img class="imageStyle" src="@/assets/BZ/2.png"></swiper-slide>
      <swiper-slide ><img class="imageStyle" src="@/assets/BZ/3.jpg"></swiper-slide>
      <swiper-slide ><img class="imageStyle"  src="@/assets/BZ/4.png"></swiper-slide>
      <swiper-slide ><img class="imageStyle" src="@/assets/BZ/5.jpg"></swiper-slide>
      <div class="swiper-button-prev" @click.stop="prevEl(item, index)"/>
      <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
      <div class="swiper-button-next" @click.stop="nextEl"/>
      <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
      <!-- 如果需要滚动条 -->
      <!-- <div class="swiper-scrollbar"></div> -->
    </swiper>
</template>

<style scoped lang="scss">
.imageStyle{
  display: block;
  width: 20rem;
  height: 20rem;
  object-fit: cover;
}
.swiperBox{
  width: 100%;
  height: 100%;
}
</style>
